import {
    VuexModule,
    Module,
    Mutation,
    Action,
    getModule
} from 'vuex-module-decorators'
import store from '@/store'

export enum DeviceType {
    Mobile,
    Desktop
}

export enum DirectionType {
    forward,
    reverse
}

export interface IAppState {
    device: DeviceType,
    direction: DirectionType,
    activeTab: number,
    defaultTitle: string,
    showBack: boolean
}

@Module({ dynamic: true, store, name: 'app' })
class App extends VuexModule implements IAppState {
    public device = DeviceType.Desktop;
    public direction: any = DirectionType.forward;
    public activeTab: any = 0;
    public defaultTitle: any = '';
    public showBack: boolean = false;

    // 是否需要显示左侧的返回按钮
    @Action({ commit: "TOOGLE_BACK"})
    public ToggleBack(showBack: boolean){
        return showBack;
    }

    @Mutation
    private TOOGLE_BACK(showBack: boolean){
        this.showBack = showBack;
    }

    // 自动填充应用的title
    @Action({commit: "TOGGLE_TITLE"})
    public ToggleTitle(defaultTitle: string){
        return defaultTitle;
    }

    @Mutation
    private TOGGLE_TITLE(defaultTitle: string) {
        this.defaultTitle = defaultTitle;
    }

    // activeTab 底部tabbar激活的key
    @Action({ commit: 'TOGGLE_TABBAR' })
    public ToggleTabbar(activeTab: any) {
        return activeTab;
    }

    @Mutation
    private TOGGLE_TABBAR(activeTab: any) {
        this.activeTab = activeTab;
    }

    // direction router-view切换的动画方向
    @Action({ commit: 'TOGGLE_DIRECTION' })
    public ToggleDirection(direction: DirectionType) {
        return direction;
    }

    @Mutation
    private TOGGLE_DIRECTION(direction: DirectionType) {
        this.direction = direction;
    }

    // device 设备是手机或者电脑
    @Action({ commit: 'TOGGLE_DEVICE' })
    public ToggleDevice(device: DeviceType) {
        return device;
    }

    @Mutation
    private TOGGLE_DEVICE(device: DeviceType) {
        this.device = device;
    }
}

export const AppModule = getModule(App)
